﻿<!DOCTYPE html>
<style>
    .container {
        position: relative;
    }

    nav {
        position: absolute;
        left: 0px;
        width: 200px;
    }

    section {
        /* position is static by default */
        margin-left: 200px;
    }

    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        height: 70px;
        background-color: white;
        width: 100%;
    }

    body {
        margin-bottom: 120px;
    }
</style>

<html xmlns="http://www.w3.org/1999/xhtml">
<script src="StyleSheet1.css"></script>
<head>
    <title></title>
    <link rel="stylesheet" href="StyleSheet1.css" type="text/css" />
</head>
    <body>
        <div class="container">
            <nav class="nav">
                My Navigation pane is not perfect
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </nav>
            <section class="body">
                Section Text 1
            </section>
            <section class="body">
                Section Text 2
            </section>

            <footer>Footer</footer>
        </div>
    </body>
</html>
